<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <div :style="{paddingBottom: (isShow ? height : 0) + 'px'}">
		
		 <keep-alive>
			<!-- 需要缓存的视图组件 --> 
			<router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
		  <!-- 不需要缓存的视图组件 -->
		<router-view v-if="!$route.meta.keepAlive"></router-view>
        <!-- <router-view :key="key"></router-view> -->
    </div>
    <!-- footer -->
    <van-sticky id="footer">
      <van-tabbar v-model="active" v-show="isShow" :fixed="true" active-color="#ff464e" inactive-color="#777">
        <van-tabbar-item :to="item.path" v-for="(item, index) in tabList" :key="index">
          <span v-text="item.title"></span>
          <template #icon="props">
			  <!-- <svg-icon :iconClass="props.active ? item.icon.active : item.icon.inactive"/> -->
            <img :src="props.active ? item.icon.active : item.icon.inactive" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </van-sticky>

  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: 'App',
  data () {
    return {
        height: 50,
        active: 1
    }
  },
  computed: {
    ...mapGetters(["tabList"]),
    isShow() {
      const {name} = this.$route;
      this.tabList.forEach((item, index) => {
        
        if (name == 'free_sy') {
          this.active = 1;
        } else {
          if (item.name === name) {
            this.active = index;
          }
        }
      });
      return this.tabList.some(item => item.name === name)
      
    },
    key(){
      return this.$route.path + Math.random();
    }
  },
  mounted() {
    // this.height = document.getElementsByClassName('van-tabbar')[0].offsetHeight;
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped="" type="text/css">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  overflow-x: hidden;
}
.van-tabbar {
  z-index: 888;
}
.discount-search .van-search__action {
  color: #333!important;
}
</style>
